Deployment

If you are using Vue CLI along with a backend framework that handles static assets as part of its deployment, all you need to do is make sure Vue CLI generates the built files in the correct location, and then follow the deployment instruction of your backend framework.

If you are developing your frontend app separately from your backend - i.e. your backend exposes an API for your frontend to talk to, then your frontend is essentially a purely static app. You can deploy the built content in the dist directory to any static file server, but make sure to set the correct publicPath.

The dist directory is meant to be served by an HTTP server (unless you've configured publicPath to be a relative value), so it will not work if you open dist/index.html directly over file:// protocol. The easiest way to preview your production build locally is using a Node.js static file server, for example serve:

If you are using Vue Router in history mode, a simple static file server will fail. For example, if you used Vue Router with a route for /todos/42, the dev server has been configured to respond to localhost:3000/todos/42 properly, but a simple static server serving a production build will respond with a 404 instead.

To fix that, you will need to configure your production server to fallback to index.html for any requests that do not match a static file. The Vue Router docs provide configuration instructions for common server setups.

If your static frontend is deployed to a different domain from your backend API, you will need to properly configure CORS.

If you are using the PWA plugin, your app must be served over HTTPS so that Service Worker can be properly registered.

Set correct publicPath in vue.config.js.

If you are deploying to https://.github.io/ or to a custom domain, you can omit publicPath as it defaults to "/".

If you are deploying to https://.github.io//, (i.e. your repository is at https://github.com//), set publicPath to "//". For example, if your repo name is "my-project", your vue.config.js should look like this:

Inside your project, create deploy.sh with the following content (with highlighted lines uncommented appropriately) and run it to deploy:

Set correct publicPath in vue.config.js as explained above.

Install the Travis CLI client: gem install travis && travis --login

Generate a GitHub access token with repo permissions.

Grant the Travis job access to your repository: travis env set GITHUB_TOKEN xxx (xxx is the personal access token from step 3.)

Create a .travis.yml file in the root of your project.

Push the .travis.yml file to your repository to trigger the first build.

As described by GitLab Pages documentation, everything happens with a .gitlab-ci.yml file placed in the root of your repository. This working example will get you started:

Typically, your static website will be hosted on https://yourUserName.gitlab.io/yourProjectName, so you will also want to create an initial vue.config.js file to update the BASE_URL value to match your project name (the CI_PROJECT_NAME environment variable contains this value):

Please read through the docs on GitLab Pages domains for more info about the URL where your project website will be hosted. Be aware you can also use a custom domain.

Commit both the .gitlab-ci.yml and vue.config.js files before pushing to your repository. A GitLab CI pipeline will be triggered: when successful, visit your project's Settings > Pages to see your website link, and click on it.

On Netlify, setup up a new project from GitHub with the following settings:

Hit the deploy button!

Also checkout vue-cli-plugin-netlify-lambda.

In order to receive direct hits using history mode on Vue Router, you need to redirect all traffic to the /index.html file.

More information on Netlify redirects documentation.

Create a file called netlify.toml in the root of your repository with the following content:

Create a file called _redirects under /public with the following content:

If you are using @vue/cli-plugin-pwa make sure to exclude the _redirects file from being cached by the service worker. To do so, add the following to your vue.config.js:

Checkout workboxOptions and exclude for more.

Render offers free static site hosting with fully managed SSL, a global CDN and continuous auto deploys from GitHub.

Create a new Static Site on Render, and give Render’s GitHub app permission to access your Vue repo.

Use the following values during creation:

That’s it! Your app will be live on your Render URL as soon as the build finishes.

In order to receive direct hits using history mode on Vue Router, you need to add the following rewrite rule in the Redirects/Rewrites tab for your site.

Learn more about setting up redirects, rewrites and custom domains on Render.

See vue-cli-plugin-s3-deploy.

Create a new Firebase project on your Firebase console. Please refer to this documentation on how to setup your project.

Make sure you have installed firebase-tools globally:

From the root of your project, initialize firebase using the command:

Firebase will ask some questions on how to setup your project.

Run npm run build to build your project.

To deploy your project on Firebase Hosting, run the command:

If you want other Firebase CLI features you use on your project to be deployed, run firebase deploy without the --only option.

You can now access your project on https://.firebaseapp.com or https://.web.app.

Please refer to the Firebase Documentation for more details.

Vercel is a cloud platform that enables developers to host Jamstack websites and web services that deploy instantly, scale automatically, and requires no supervision, all with zero configuration. They provide a global edge network, SSL encryption, asset compression, cache invalidation, and more.

To deploy your Vue project with a Vercel for Git Integration, make sure it has been pushed to a Git repository.

Import the project into Vercel using the Import Flow. During the import, you will find all relevant options preconfigured for you with the ability to change as needed.

After your project has been imported, all subsequent pushes to branches will generate Preview Deployments, and all changes made to the Production Branch (commonly "master" or "main") will result in a Production Deployment.

Once deployed, you will get a URL to see your app live, such as the following: https://vue-example-tawny.vercel.app/.

If you want to use a Custom Domain with your Vercel deployment, you can Add or Transfer in your domain via your Vercel account Domain settings.

To add your domain to your project, navigate to your Project from the Vercel Dashboard. Once you have selected your project, click on the "Settings" tab, then select the Domains menu item. From your projects Domain page, enter the domain you wish to add to your project.

Once the domain has been added, you will be presented with different methods for configuring it.

You can deploy a fresh Vue project, with a Git repository set up for you, with the following Deploy Button:

TODO | Open to contribution.

Install Heroku CLI

Create a static.json file:

More info: Getting started with SPAs on Heroku

To deploy with Surge the steps are very straightforward.

First, you would need to build your project by running npm run build. And if you haven't installed Surge's command line tool, you can simply do so by running the command:

Then cd into the dist/ folder of your project and then run surge and follow the screen prompt. It will ask you to set up email and password if it is the first time you are using Surge. Confirm the project folder and type in your preferred domain and watch your project being deployed such as below.

Verify your project is successfully published by Surge by visiting myawesomeproject.surge.sh, vola! For more setup details such as custom domains, you can visit Surge's help page.

As described in the Bitbucket documentation you need to create a repository named exactly .bitbucket.io.

It is possible to publish to a subfolder of the main repository, for instance if you want to have multiple websites. In that case, set correct publicPath in vue.config.js.

If you are deploying to https://.bitbucket.io/, you can omit publicPath as it defaults to "/".

If you are deploying to https://.bitbucket.io//, set publicPath to "//". In this case, the directory structure of the repository should reflect the url structure, for instance, the repository should have a / directory.

Inside your project, create deploy.sh with the following content and run it to deploy:

Deploy your application using nginx inside of a docker container.

Install docker

Create a Dockerfile file in the root of your project.

Create a .dockerignore file in the root of your project

Setting up the .dockerignore file prevents node_modules and any intermediate build artifacts from being copied to the image which can cause issues during building.

Create a nginx.conf file in the root of your project

Nginx is an HTTP(s) server that will run in your docker container. It uses a configuration file to determine how to serve content/which ports to listen on/etc. See the nginx configuration documentation for an example of all of the possible configuration options.

The following is a simple nginx configuration that serves your vue project on port 80. The root index.html is served for page not found / 404 errors which allows us to use pushState() based routing.

Build your docker image

Run your docker image

This build is based on the official nginx image so log redirection has already been set up and self daemonizing has been turned off. Some other default settings have been setup to improve running nginx in a docker container. See the nginx docker repo for more info.